<template>
  <div class="infinite-container">
    <div class="lefttime">
      状态：{{pageData.orderStatus | filterDrugStatus}}
      <template v-if="pageData.orderStatus==='0'">
          <span v-if="pageData.leftTimeTxt!=='已超时'">
            (剩余时间{{pageData.leftTimeTxt}})
          </span>
        <span v-else>
            (已超时)
          </span>
      </template>
    </div>
    <left-border-title :title="'配送信息'"></left-border-title>
    <div class="fcon">
      <ul v-if="address">

        <li>
          <div>取药方式 </div>
          <div>
            {{pageData.takeWay | takeWayFilter}}
            <!-- &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" @click="changeAddress">更换地址></a> -->
          </div>
        </li>
        <li>
          <div>收货人 </div>
          <div>{{address.consigneeName}} {{address.consigneePhone}} </div>
        </li>
        <li>
          <div>收货地址 </div>
          <div>{{address.province}} {{address.city}} {{address.county}} {{address.detailedAddress}}</div>
        </li>
      </ul>
      <mu-list v-else>
        暂无配送信息
        <!-- <mu-list-item title="没有收货地址，请添加收货地址" @click="addAddress">
           <img src="../../assets/fzhis/icon_add.png" width="30" slot="leftAvatar" />
           <i class="iconfont icon-small-arrow-right" slot="right"></i>
           </mu-list-item> -->
      </mu-list>

    </div>
    <div class="mt10"></div>
    <left-border-title :title="'药品信息'"></left-border-title>
    <div class="item-con">
      <div v-for="(item, index) in pageData.drugDetail" :key="index">
        <div class="item-left">
          <div>{{item.name}} </div>
          <div>{{item.specification}} </div>
        </div>
        <div class="item-right">{{item.price | fixedMoney}}*{{item.quantity}}</div>
      </div>

    </div>
    <div class="item-footer">
      <div>
        <div></div>
        <div>
        </div>
        <div>
          <span>共{{pageData.drugDetail && pageData.drugDetail.length}}件药品（运费  到付）</span>
          <span>合计:</span>
          <span>{{pageData.total | fixedMoney}}</span>
        </div>
      </div>
    </div>
    <div class="mt10"></div>
    <div class="bgwhite">
      <mu-list>
        <mu-list-item title="配送费">
          <span slot="right">￥{{pageData.expressFee}}</span>
        </mu-list-item>
        <mu-divider/>
      </mu-list>
    </div>

    <div class="mt10"></div>
    <div class="bgwhite fcon">
      <ul>
        <li>
          <div>支付方式:</div>
          <div>
            {{pageData.isExpressFeeArrivedPay | payMethodFilter}}
          </div>
        </li>
        <li>
          <div>订 单 号 :</div>
          <div>{{pageData.invoiceNo}}</div>
        </li>
        <li>
          <div>下单时间:</div>
          <div>{{pageData.orderDate}}</div>
        </li>
        <li>
          <div>付款时间:</div>
          <div>{{pageData.orderDate}}</div>
        </li>
      </ul>
    </div>

    <div>
      <div class="lcon" v-if="pageData.orderStatus === '0' && pageData.leftTimeTxt!=='已超时'">
        <mu-raised-button label="确认支付" fullWidth primary @click="gotoPay"></mu-raised-button>
        <mu-raised-button label="取消订单" fullWidth secondary @click="cancel"></mu-raised-button>
      </div>
      <div class="lcon" v-if="pageData.orderStatus === '2'"> <!--待收货状态-->
        <mu-raised-button label="查看物流" fullWidth @click="goExpressDetail()"></mu-raised-button>
        <mu-raised-button label="确认收货" fullWidth primary @click="openReceiveDialog()"></mu-raised-button>
      </div>
    </div>

    <mu-dialog :open="receiveDialog" title="温馨提示" >
      请收到货后，再确认收货!否则您可能钱货两空哦
      <mu-flat-button slot="actions" @click="closeReceiveDialog()" primary label="未收到货"/>
      <mu-flat-button slot="actions" @click="confirmReceive()" primary label="已收到货"/>
    </mu-dialog>
  </div>
</template>

<script>
  import leftBorderTitle from "../../components/leftBorderTitle.vue";
  import TimeCounter from "../../components/TimeCounter.js";
  import {commonAjaxJson, RESTFUL_API} from '../../api/api'

  export default {
    data() {
      return {
        pageData: {},
        address: null,
        receiveDialog: false
      }
    },
    components: {
      leftBorderTitle
    },
    filters: {
      'takeWayFilter'(val) {
        if (val == 1) {
          return '到院自取'
        } else {
          return '物流配送'
        }
      },
      'payMethodFilter' (val) {
        if (val == 1) {
          return '到付'
        } else {
          return '在线支付'
        }
      }
    },
    methods: {
      goExpressDetail () {
        this.$router.push({
          path: '/orderHistory/expressInfo',
          query: {
            invoiceNo: this.pageData.invoiceNo
          }
        })
      },
      getList() {
        commonAjaxJson(RESTFUL_API.getList, {
          userId: sessionStorage.getItem('userId')
        }, true).then(res => {
          if (res.data.code === 200) {
            this.address = res.data.data.filter(v => v.isDefault == 1)[0];
          }
        })
      },
      openReceiveDialog () {
        this.receiveDialog = true
      },
      closeReceiveDialog () {
        this.receiveDialog = false
      },
      confirmReceive () {
        // 确认收货
        // confirmDrugReceived
        commonAjaxJson(RESTFUL_API.confirmDrugReceived, {
          invoiceNumber: this.pageData.invoiceNo
        }, true)
          .then(res => {
            if (res.data.code === 200) {
              this.$store.commit("UPDATE_TOAST", {
                message: "您已确认收货",
                fn: () => {
                  this.receiveDialog = false
                  window.history.back()
                }
              })
            }
          })
      },
      cancel() {
        commonAjaxJson(RESTFUL_API.cancelFillOrder, {
          paymentOrderId: this.pageData.paymentOrderId
        })
          .then(res => {
            if (res.data.code === 200) {
              this.$store.commit("UPDATE_TOAST", {
                message: "您已取消订单",
                fn: () => window.history.back()
              });
            }
          });
      },
      gotoPay() {
        // Go to pay order
        this.$router.push({
          path: "/orderHistory/confirmPay",
          query: {
            id: this.pageData.paymentOrderId,
            patientCode: this.pageData.patientCode
          }
        });
      },
      /**
       * 处方费用预结算
       */
      getPendingPaymentCalc() {
        return commonAjaxJson(RESTFUL_API.getPendingPaymentCalc, {
          paymentOrderId: this.pageData.paymentOrderId
        });
      },
      addAddress() {
        this.$router.push({
          path: "/setting/edit-address",
          query: {
            action: "add",
            redirect: this.$route.path
          }
        });
      },
      changeAddress() {
        this.$router.push({
          path: "/setting/addresses",
          query: {
            redirect: this.$route.path
          }
        });
      },
      initPageData() {
        let data = this.$store.state.pageData;
        let tempTotal = 0;
        if (data.drugDetail) {
          data.drugDetail.forEach(v => {
            tempTotal += parseFloat(v.price) * parseFloat(v.quantity);
          });
        }
        data.total = tempTotal;
        if (data.address) {
          this.address = {
            addressDetail: data.addressDetail,
            address: data.address,
            consigneePhone: data.consigneeCall,
            consigneeName: data.consigneeName
          }
        }
        this.pageData = data;
      }
    },
    mounted() {
      this.initPageData()
      this.getList()
    }
  };
</script>

<style lang="less" scoped>
  @import "../../common/css/flex.css";
  @import "../../common/css/component";

  .infinite-container {
    padding-bottom: 30px;
    @{deep} .mu-item-left img {
      width: 30px;
      height: 30px;
    }
    @{deep} .mu-item.show-left {
      padding-left: 60px;
    }
    @{deep} .mu-item-title {
      color: #666;
    }
    @{deep} .mu-item-right {
      color: #333;
    }
    @{deep} .mu-item {
      min-height: 44px;
    }
    .feeText {
      color: #0fc47d;
    }
    .lefttime {
      width: 100%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 14px;
      color: #ff6600;
      background: #fffdce;
      border-bottom: 1px solid #e8e8e8;
    }
    .lcon {
      width: 100%;
      padding-top: 10px;
      text-align: center;
      @{deep}.mu-raised-button {
        width: 80%;
        height: 44px;
        margin-top: 20px;
      }
      @{deep}.mu-raised-button-secondary {
        color: #f24242;
        border: 1px solid #f24242;
        background: #fff1f1;
      }
    }
    .fcon {
      padding: 15px;
      background: #fff;
      border-top: 1px solid #e8e8e8;
      > ul {
        > li + li {
          margin-top: 5px;
        }
        > li {
          display: table;
          > div {
            display: table-cell;
            font-size: 14px;
          }
          > div:first-child {
            color: #666;
            width: 5em;
            white-space: nowrap;
            padding-right: 15px;
          }
          > div:last-child {
            color: #333;
          }
        }
      }
    }
    .item-con {
      border-bottom: 1px solid #e8e8e8;
      border-top: 1px solid #e8e8e8;
      background: #fff;
      padding: 15px 15px 10px 15px;
      font-size: 14px;
      color: #333;
      > div + div {
        margin-top: 10px;
      }
      > div {
        width: 100%;
        position: relative;
        display: table;
        > div {
          display: table-cell;
        }
      }
    }
    .item-footer {
      width: 100%;
      padding-left: 15px;
      overflow: hidden;
      background: #fff;
      border-bottom: 1px solid #efefef;
      img {
        width: 14px;
        height: 14px;
      }
      > div {
        width: 100%;
        height: 40px;
        display: table;
        font-size: 14px;
        > div {
          display: table-cell;
          vertical-align: middle;
        }
        > div:first-child {
          line-height: 0;
        }
        > div:nth-child(3) {
          padding-right: 15px;
          text-align: right;
          color: #ff6600;
          > span:first-child {
            color: #666;
          }
        }
        > div:nth-child(4) {
          width: 75px;
          padding-right: 15px;
          text-align: right;
          white-space: nowrap;
        }
      }
    }
    .item-right {
      text-align: right;
      white-space: nowrap;
    }
    .item-left {
      > div:nth-child(2) {
        color: #999;
      }
    }
  }
</style>
